<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>找回密码</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="#(CPATH)/static/adminlte/css/adminlte.min.css">


    <!--[if lt IE 9]>
    <script src="#(CPATH)/static/html5shiv/html5shiv.min.js"></script>
    <script src="#(CPATH)/static/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .login-page {
            background-image: url("#(CDN)#(CPATH)/static/commons/img/bg.png");
            background-size: cover;
        }

        .login-box {
            margin-top: 100px;
        }

        .form-group {
            text-align: left;
        }


    </style>

    <script>

        window.onload=function (){
            $("#phone").hide();
            $("#email").show();
            $(".mobileBtn").css({
                "color":"#333",
                "border-bottom":"3px solid #fff"
            })
            $(".emailBtn").css({
                "color":"#007bff",
                "border-bottom":"3px solid #007bff"
            })

        };

        function inputMobile(){
            $("#phone").show();
            $(".mobileBtn").css({
                "color":"#007bff",
               "border-bottom":"3px solid #007bff"
            })
            $(".emailBtn").css({
                "color":"#333",
                "border-bottom":"3px solid #fff"
            })
            $("#email").hide();
            $("#emailNum").val('');

        }



        function inputEmail(){
            $("#phone").hide();
            $("#mobile").val('');
            $("#email").show();
            $(".mobileBtn").css({
                "color":"#333",
                "border-bottom":"3px solid #fff"
            })
            $(".emailBtn").css({
                "color":"#007bff",
                "border-bottom":"3px solid #007bff"
            })

        }

        function goResetPwd(){
            var mobile = $("#mobile").val();
            var code = $("#captcha").val();
            if(mobile == null || mobile == ''){
                alert("手机号不能为空！")
                return;
            }
            if(code == null || code == ''){
                alert("验证码不能为空！")
                return;
            }

            $.ajax({
                url: jpress.cpath+jpress.spath+'/user/validateCodeToResetPwd',
                type: 'POST',
                data: {"mobile":mobile,"captcha":code},
                dataType:'json',
                success:
                    function (result) {
                        console.log(result);
                        if (result.state == "ok") {
                            // layer.msg('验证码发送成功，请注意查收。');
                            window.location.href = result.url;
                        } else {
                            alert(result.message);
                        }
                    },
                error:
                    function (arg) {
                        console.log("error...", arg);
                        if (arg.responseJSON) {
                            alert(arg.responseJSON.message);
                        }
                    }
            });


        }


    </script>


</head>
<body class="hold-transition login-page">

<div class="wrapper">

    <div class="login-box">
        <div class="login-logo" style="color: #FFF">
            输入账号
        </div>
        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">

<!--                <form action="" method="post" class="autoAjaxSubmit" data-ok-href="#para('goto',CPATH + '/ucenter')"-->
                <form action="" method="post" class="autoAjaxSubmit" data-ok-href=""
                      data-fail-function="">

                    <div class="form-group">
                        <div class="d-flex align-items-center  pt-2">
                            <div  class="w-50 text-center p-3 emailBtn" onclick="inputEmail()">邮箱账号</div>
                            <div class="w-50 text-center p-3 mobileBtn" onclick="inputMobile()">手机账号</div>
                        </div>
                        <!--   邮箱 -->
                        <div id="email">
                            <div class="w-100 text-center pt-4">
                                    <input type="text" class="form-control" placeholder="请输入邮箱号" name="email" id="emailNum" required>
                            </div>
                            <div class="form-group" style="padding-top: 10px;">
                                <div class="col-12" style="padding-top: 15px">

                                    <button type="button" id="getCode" data-type="pointsVerify" data-location="html"
                                            data-value-id="emailNum" data-path="#(CPATH)#(SPATH)/user/doSendResetPwdLinkToEmail"
                                            data-url="#(CPATH)#(SPATH)/user/sendLink" data-point=""
                                            class="btn btn-primary btn-block btn-flat jpress-captcha" > 下一步</button>

                                </div>
                            </div>
                    </div>

                        <!--   手机号 -->
                        <div id="phone">
                        <div class="w-100 text-center pt-4">
                            <div class="input-group jpress-tip mb-3">
                                <input type="text" class="form-control" placeholder="请输入手机号" name="mobile" id="mobile" required>
                                <div class="input-group-append">

                                    <button type="button" id="getMobileCode" data-type="pointsVerify" data-location="body"
                                            data-value-id="mobile" data-path="#(CPATH)#(SPATH)/user/doResetPwdSendCodeToMobile" required
                                            data-url="" data-point="验证码发送成功，请手机查收！"
                                            style="float: right;background: #DDDDDD;"
                                            class="input-group-text jpress-captcha" >获取验证码</button>
                                </div>
                            </div>

                            <div class="form-group">
                                <label style="display: block;">验证码</label>
                                <div class="clearfix position-relative" >
                                    <input type="text" id="captcha" autocomplete="off" class="form-control " style="float: left;"
                                           placeholder="请输入验证码" name="captcha" required>
                                </div>
                            </div>

                        </div>

                        <div class="form-group" style="padding-top: 10px;">
                            <div class="col-12" style="padding-top: 15px">
                                <button type="button" class="btn btn-primary btn-block btn-flat" onclick="goResetPwd()"> 下一步</button>

                            </div>
                        </div>
                    </div>

                    </div>

                </form>

            </div>
        </div>
    </div>
    <!-- /.login-box -->

</div>

<script src="#(CPATH)/static/components/jquery/jquery.min.js"></script>
<script src="#(CPATH)/static/components/jquery/jquery.form.min.js"></script>
<script src="#(CPATH)/static/components/jquery-validation/jquery.validate.min.js"></script>
<script src="#(CPATH)/static/components/jquery-validation/additional-methods.min.js"></script>
<script src="#(CPATH)/static/components/jquery-validation/localization/messages_zh.min.js"></script>
<script src="#(CPATH)/static/components/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="#(CPATH)/static/front/jpressfront.js"></script>


</body>


</html>


